<script setup lang="ts">
import type { TodoItemsVO } from '#/api/hm/todoItems/model';

import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Divider, Descriptions } from 'ant-design-vue';

import { todoItemsInfo } from '#/api/hm/todoItems';
import { Description, useDescription } from '#/components/description';

import ApprovalFlow from './approval-flow.vue';
import { descSchema } from '../info';

const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: handleOpenChange,
});

const [registerDescription, { setDescProps }] = useDescription({
  column: 2,
  labelStyle: {
    minWidth: '120px',
    width: '120px',
  },
  schema: descSchema,
});

const todoData = ref<TodoItemsVO>();

async function handleOpenChange(open: boolean) {
  if (!open) {
    todoData.value = undefined;
    return null;
  }

  modalApi.modalLoading(true);

  try {
    const { id } = modalApi.getData() as { id: number | string };
    const record = await todoItemsInfo(id);
    todoData.value = record;

    // 设置描述列表数据
    setDescProps({ data: record });
  } catch (error) {
    console.error('加载待办详情失败', error);
  } finally {
    modalApi.modalLoading(false);
  }
}
</script>

<template>
  <BasicModal
    :footer="false"
    :fullscreen-button="false"
    title="待办事项详情"
    class="w-[1200px]"
  >
    <!-- 审批流程图 -->
    <div v-if="todoData" class="mb-6">
      <Divider orientation="left">
        <span class="text-base font-semibold">审批流程</span>
      </Divider>
      <ApprovalFlow :data="todoData" />
    </div>

    <!-- 基本信息 -->
    <Divider orientation="left">
      <span class="text-base font-semibold">待办信息</span>
    </Divider>
    <Description @register="registerDescription" />

    <!-- 状态信息 -->
    <Divider orientation="left">
      <span class="text-base font-semibold">状态信息</span>
    </Divider>
    <Descriptions :column="2" bordered>
      <Descriptions.Item label="当前状态">
        <a-tag
          v-if="todoData?.status === '0'"
          color="processing"
        >
          未处理
        </a-tag>
        <a-tag
          v-else-if="todoData?.status === '1'"
          color="success"
        >
          已完成
        </a-tag>
        <a-tag
          v-else-if="todoData?.status === '2'"
          color="error"
        >
          已驳回
        </a-tag>
        <span v-else>-</span>
      </Descriptions.Item>

      <Descriptions.Item label="创建方式">
        <a-tag v-if="todoData?.createType === '0'" color="blue">
          手动创建
        </a-tag>
        <a-tag v-else-if="todoData?.createType === '1'" color="cyan">
          系统生成
        </a-tag>
        <span v-else>-</span>
      </Descriptions.Item>

      <Descriptions.Item label="办结时间">
        {{ todoData?.todoCompletionTime || '-' }}
      </Descriptions.Item>

      <Descriptions.Item label="办事结果">
        {{ todoData?.todoResult || '-' }}
      </Descriptions.Item>
    </Descriptions>

    <!-- 附件信息 -->
    <div v-if="todoData?.todoFiles && todoData.todoFiles.length > 0" class="mt-6">
      <Divider orientation="left">
        <span class="text-base font-semibold">附件信息</span>
      </Divider>
      <div class="flex flex-wrap gap-4">
        <a-image
          v-for="(url, index) in todoData.todoFiles"
          :key="index"
          :src="url"
          :width="120"
          class="rounded border"
        />
      </div>
    </div>

    <!-- 备注信息 -->
    <div v-if="todoData?.remark" class="mt-6">
      <Divider orientation="left">
        <span class="text-base font-semibold">备注信息</span>
      </Divider>
      <div class="bg-gray-50 p-4 rounded">
        {{ todoData.remark }}
      </div>
    </div>
  </BasicModal>
</template>

<style scoped>
:deep(.ant-divider-inner-text) {
  font-size: 16px;
  font-weight: 600;
}
</style>
